<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <link rel="stylesheet" type="text/css" href="../../c-asserts/sui/sui1.0.1.css" />
    <link rel="stylesheet" type="text/css" href="../../c-asserts/mui/css/mui.min.css" />
    <link rel="stylesheet" type="text/css" href="../../c-asserts/swiper/css/swiper.css" />
    <style type="text/css">
        .transparent{
            position:fixed;
            z-index:1990;
            background-color:#EB4F38;
            height:44px;
            width:100%;
            opacity:0.0;
            top:0;
        }
        .header{
            width:100%;
            position:fixed;
            z-index:19901225;
            height:44px;
            line-height:44px;
            background-color:transparent;
            top:0;
        }
        .mui-icon-back,.sui-icon-share{
            color:#FFFFFF;
            font-size:24px !important;
            line-height:32px;
        }
        .mui-icon-star{
            color:#FFFFFF;
            font-size:24px !important;
            line-height:32px;
        }
        .mui-icon-starhalf{
            color:#FFFFFF;
            font-size:24px !important;
            line-height:32px;
        
        }
        .share{
            right:10px;
        }
        .item-option{
            margin-bottom:12px;
            background-color:#FFFFFF;
        }
        .content-item{
            padding:10px 12px;
        }
        .content-item{
            border-bottom:1px solid #efeff4;
        }
        .theme-name{
            font-size:16px;
            color:#666666;
            padding-bottom:4px;
        }
        .theme-h4{
            font-size:16px;
            color:#666666;
        }
        .theme-h4.teambuy{
            line-height:25px;
        }
        .content-duang{
            font-size:15px;
            color:#8f8f94;
            padding-left:12px;
        }
        .swiper-slide img{
            width:100%;
        }
        .theme-img img{
            width:70px;
            height:60px;
        }

        .evaluate-img img{
            width:45px;
            height:45px;
            border-radius:100%;
        }
        .mui-icon-arrowright{
            font-size:20px !important;
            line-height:20px;
        }
        .item-price{
            font-size:28px;
            font-weight:bold;
            line-height:33px;
            color:#20cab0;
        }
        .theme-type{
            font-size:15px;
            color:#8f8f94;
        }
        .shopinfo{
            position:relative;
            height:40px;
        }
        .weizhi{
            position: absolute;
            width:auto;
            left:40px;
            right:60px;
            font-size:14px;
            line-height:20px;
            height:40px;
            overflow:hidden;
            text-overflow:ellipsis;
            color:#8f8f94;
        }
        .location{
            width:40px;
            position: absolute;
            left:0;
        }
        .location span{
            display:block;
            font-size:23px;
            color:#666666;
            line-height:40px;
            text-align:center;
        }
        .phone{
            position: absolute;
            right:0;
            padding-left:10px;
            border-left:1px solid #efeff4;
        }
        .phone span{
            display:block;
            font-size:32px;
            line-height:40px;
            color:#FFFFFF;
            background-color:#4cd964;
            padding:0 4px;
            border-radius:5px;
        }
        .swiper-container {
            height: 260px;
        }
        .evaluate-img img{
            width:45px;
            height:45px;
            border-radius:100%;
        }
        .evaluate-content{
            padding-top: 5px;
            height: auto;
            color: #666666;
            font-size: 14px;
            white-space:normal;
        }
        .evaluate-reply{
            color: #ff7720;
            font-size: 14px;
        }
        .evaluate-star-box{
            width:100px;
            background-color:#c4c2c2;
            height: 21px;
        }
        .evaluate-star1{
            width:20px;
            height:21px;
            background-color:#ff7720;
        }
        .evaluate-star2{
            width:40px;
            height:21px;
            background-color:#ff7720;
        }
        .evaluate-star3{
            width:60px;
            height:21px;
            background-color:#ff7720;
        }
        .evaluate-star4{
            width:80px;
            height:21px;
            background-color:#ff7720;
        }
        .evaluate-star5{
            width:100px;
            height:21px;
            background-color:#ff7720;
        }
        .evaluate-starback{
            width:100px;
            background-image:url(../../image/star.png);
            background-size:100% 100%;
            background-position:center center;
            background-repeat:no-repeat;
            height:21px;
        }

    </style>
</head>
<body ms-controller="theme-detail" class="ms-controller">
    <div class="transparent"></div>
    <div class="header">
        <button class="mui-btn mui-btn-link mui-btn-nav mui-pull-left back" onclick="api.closeWin();" tapmode>
            <span class="mui-icon mui-icon-back"></span>
        </button>
        <button class="mui-btn mui-btn-link mui-btn-nav mui-pull-right star" onclick="themecollect()" tapmode>
            <span class="mui-icon mui-icon-star"></span>
        </button>
        <button class="mui-btn mui-btn-link mui-btn-nav mui-pull-right share" tapmode>
            <span class="mui-icon sui-icon sui-icon-share"></span>
        </button>
    </div>
    <div class="item-option">
        <div class="swiper-container" >
            <div class="swiper-wrapper">
                <div class="swiper-slide" ms-repeat="theme.photo" data-repeat-rendered="imgReady">
                    <img ms-attr-src="el + '?imageView2/1/h/260'">
                </div>
            </div>
            <div class="swiper-pagination"></div>
        </div>
        <div class="content-item">
            <div class="theme-name">{{theme.themename}}</div>
            <div class="theme-type">{{getNameById(icontent,theme.content)}}，{{getNameById(isize,theme.size)}}，{{getNameById(icategory,theme.category)}}</div>
            <div class="sui-flex-row">
                <div class="theme-type">难度：</div>
                <div class="evaluate-star-box">
                    <div ms-class="evaluate-star{{theme.diffstar}}">
                        <div class="evaluate-starback"></div>
                    </div>
                </div>
                <div class="theme-type">逻辑：</div>
                <div class="evaluate-star-box">
                    <div ms-class="evaluate-star{{theme.logicstar}}">
                        <div class="evaluate-starback"></div>
                    </div>
                </div>
            </div>
            <div class="sui-flex-row">
                <div class="theme-type">动作：</div>
                <div class="evaluate-star-box">
                    <div ms-class="evaluate-star{{theme.actionstar}}">
                        <div class="evaluate-starback"></div>
                    </div>
                </div>
                <div class="theme-type">场景：</div>
                <div class="evaluate-star-box">
                    <div ms-class="evaluate-star{{theme.scenestar}}">
                        <div class="evaluate-starback"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="content-item">
            <div class="sui-flex-row">
                <div class="item-price">￥{{theme.displayprice}}</div>
                <div class="theme-type" style="padding-top: 15px; padding-left: 18px;">已售 {{theme.soldnum}}</div>
                <div class="sui-flex1"></div>
                <div class="createteam"><button class="mui-btn mui-btn-green"  ms-click="createTeam(theme.themeid)">立即组队</button></div>
            </div>
        </div>
     </div>

     <div class="item-option">
        <div class="content-item sui-flex-row" ms-visible="(theme.evalstar==0)">
            <div class="content-duang">暂无评价</div>
        </div>
        <div class="content-item sui-flex-row" ms-visible="(theme.evalstar!=0)" ms-click="toEval(theme.themeid)" >
            <div class="evaluate-star-box">
                <div ms-class="evaluate-star{{theme.evalstar}}">
                    <div class="evaluate-starback"></div>
                </div>
            </div>
            <div class="content-duang">{{theme.evalstar}}分</div>
            <div class="sui-flex1"></div>
            <div class="content-duang" >评价<span class="mui-icon mui-icon-arrowright"></span></div>
        </div>
    </div>
    
    <div class="item-option">
        <div class="content-item sui-flex-row" ms-click="toShop(theme.shopid)">
            <div class="theme-h4 teambuy">商家信息</div>
            <div class="sui-flex1"></div>
            <div class="content-duang" ><span class="mui-icon mui-icon-arrowright"></span></div>
        </div>
        <div class="content-item">
            <div class="shopinfo">
                <div class="location" ms-click="toShop(theme.shopid)" ><span class="mui-icon mui-icon-location"></span></div>
                <div class="weizhi" ms-click="toMap(theme.lon,theme.lat,theme.shopname)">{{theme.area}} {{theme.street}}</div>
                <div class="phone" ms-click="phoneCall(theme.phone)" ><span class="mui-icon  mui-icon-phone"></span></div>
            </div>
        </div>
    </div>

    <div class="item-option">
        <div class="content-item sui-flex-row">
            <div class="theme-h4 teambuy">购买须知</div>
        </div>
        <div class="content-item">
            <div class="theme-type" ms-html="theme.remark"></div>
        </div>
    </div>

<div class="item-option">
    <div class="content-item sui-flex-row">
        <div class="theme-h4 teambuy">用户评价</div>
        <div class="sui-flex1"></div>
        <div class="content-duang" ></div>
    </div>
    <ul class="mui-table-view">
        <li ms-repeat="evals" class="mui-table-view-cell mui-media" style="white-space:normal;">
            <a href="javascript:;" class="">
                <img ms-attr-src="el.headimgurl" class="mui-media-object mui-pull-left">
                <div class="mui-media-body">
                    <div class="sui-flex-row">
                        {{el.username}}
                        <div class="sui-flex1"></div>
                        <div class="review-zan" ms-click="zanClick(el.id)" ><span class="sui-icon sui-icon-zan">{{el.like}}</span></div>
                    </div>
                    <div class="sui-flex-row">
                        <div class="evaluate-star-box">
                            <div ms-class="evaluate-star{{el.evalstar}}">
                                <div class="evaluate-starback"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="evaluate-content">
                    {{el.content}}
                </div>
                <div class="mui-content-padded evaluate-content" ms-visible="(el.reply!='')">
                    <span class="evaluate-reply">商家回复：</span>
                    {{el.reply}}
                </div>
            </a>
        </li>
    </ul>
</div>

  
</body>
<script type="text/javascript" src="../../c-script/api.js"></script>
<script type="text/javascript" src="../../c-script/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="../../c-script/public.js"></script>
<script type="text/javascript" src="../../c-script/avalon.mobile.js"></script>
<script type="text/javascript" src="../../c-asserts/swiper/js/swiper.min.js"></script>
<script type="text/javascript">
    var transparent;
    var wrapper;
    var bodyHeight;
    var themeid = "1";
    var themeModel = avalon.define({
        $id:"theme-detail",
        theme:{},
        evals:new Array(),
        imgReady:function(){//在dom渲染完成之后再初始化swiper-wrapper插件
            var mySwiper = new Swiper('.swiper-container',{
                pagination : '.swiper-pagination',
                loop:true,
                autoplay : 5000});
            transparent = $('.transparent');
            wrapper = $('.swiper-wrapper').height() - 44;
            bodyHeight = $('body').height();
            setInterval (function(){
                var htmlbi =  wrapper / bodyHeight ;
                var scrolltop = document.body.scrollTop;
                var scrollheight = document.body.scrollHeight;
                var scrollbi = scrolltop / scrollheight;
                if(scrollbi < htmlbi) transparent.css('opacity',parseFloat(scrollbi / htmlbi).toFixed(1));
                else transparent.css('opacity',1);
            },100);
        },
        phoneCall:function(number){
            api.call({number:number});
        },
        toShop:function(shopid){
              //  pageParam:{shopid:shopid}
            location.href="shop.html";
        },
        toMap:function(lon,lat,name){
            api.openWin({
                name: 'amapwin',
                url: '../public/amapwin.html',
                pageParam:{lon:lon,lat:lat,name:name}
            });
        },
        toEval:function(themeid,shopname,themename){
              //  pageParam:{themeid:themeid}
            location.href="evaluateWin.html";
        },createTeam:function(themeid){,
            //    pageParam:{themeid:themeid}
            location.href="setectfriendwin.html";
           
       }      
    });
        
    var isinit = false;
    $(document).ready(function(){
        if (isinit) return;
    	//alert('apiready');
        // iosConfig($('.transparent'));
        // var iosHeight = iosConfig($('.header'));
        try{themeid = api.pageParam.themeid;}catch(e){}
        callSvr("theme/getById",{themeid:themeid},function(result){
            themeModel.theme = result;
            callSvr("eval/find",{themeid:themeid+"",type:"2",page:1,pagesize:3},function(result){
                themeModel.evals = result;
            });
        });
        isinit = true;           
    };

     function themecollect(){
             $('.mui-icon-star').find('.mui-icon-starhalf');
        myPostAjax('user/collectTheme.json',{themeid:themeid,code:getUserCode()},function(ret){                  
        });
        alert("收藏成功");     
    };
    
</script>
</html>